<template>
    <div>
        <Form @submit="setNewPassword(forgetForm,repassword)">
            <CellGroup inset>
                <Field label-width="3em" label-align="left" :clearable="true" v-model="forgetForm.phone" type="phone"
                    name="手机号" label="手机号" placeholder="请输入手机号" :rules="[{ required: true, message: '请填写手机号' }]" />

                <Field label-width="3em" label-align="left" :clearable="true" v-model="forgetForm.code" type="phone"
                    name="验证码" label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请输入验证码' }]">
                    <template #button>
                        <Button :disabled="buttonClickable" size="mini" round plain type="warning"
                            @click="startGet()">{{ buttonText }}</Button>
                    </template>
                </Field>
                <Field label-width="3em" label-align="left" :clearable="true" v-model="forgetForm.password"
                    type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <Field label-width="5em" label-align="left" :clearable="true" v-model="repassword"
                    type="password" name="确认" label="确认密码" placeholder="确认密码"
                    :rules="[{ required: true, message: '请填写确认密码' }]" />
            </CellGroup>
            <div style="margin: 16px;">
                <Button round block type="warning" native-type="submit" size="small">
                    确 认
                </Button>
            </div>
        </Form>
    </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { Button, Form, CellGroup, Field, NoticeBar, Notify } from "vant";
import { setNewPassword, getCode } from "@/v-api/login";
const buttonText = ref('获取验证码');
const buttonClickable = ref(false);
const forgetForm = reactive({
    phone: "",
    code: "",
    password: "",
});
const repassword = ref("");
const phoneRegex = /^[1]([3-9])[0-9]{9}$/;
const startGet = () => {
      
    if(!phoneRegex.test(forgetForm.phone)){
        Notify({ type: 'danger', message: '请输入正确手机号' });
        return;
    }
    getCode(forgetForm.phone);
    
    buttonClickable.value = true;
    let count = 60;
    const timer = setInterval(() => {
        count--;
        buttonText.value = `等待${count}s`;
        if (count <= 0) {
            clearInterval(timer);
            buttonText.value = '获取验证码';
            buttonClickable.value = false;
            clearInterval(timer);
        }
    }, 1000);
}

</script>
<style ></style>